<template>
	<view>
		<block v-if="payGroupName != 'service_refresh' && payGroupName != 'service_top_refresh'">
			<view class="payment" :class="pay_close ? 'on' : ''">
				<view class="title acea-row row-center-wrapper" v-if="payTitle">
					{{payTitle}}<block v-if="isValue">：<text class="user_circle_count">{{userCount || ''}}</text></block><text class="iconfont icon-guanbi" @click='close'></text>
				</view>
				<view class="payment_content">
					<view class="pay_data_lst" v-if="payDataList.length">
						<view v-for="(item, index) in payDataList" :key="index" class="pay_number_item" :class="check_index == index ? 'pay_number_item_on' : ''" @click="clickCircleNumber(index)">
							<view class="pay_number_num">{{item.number}}{{unit}}</view>
							<view class="pay_number_price">{{item.price}}元</view>
						</view>
					</view>
					<view class="pay_title">
						会员付费
					</view>
					<view class="item acea-row row-between-wrapper" @click='goPay(item.number || 0 , item.value)' v-for="(item,index) in payMode"
					 :key="index" v-if="item.payStatus == 1">
						<view class="left">
							<view class="iconfont" :class="item.icon"></view>
							<view class="text">
								<view class="name">{{item.name}}</view>
								<!-- <view class="info" v-if="item.number">
									{{item.title}} <span class="money">￥{{ item.number }}</span>
								</view>
								<view class="info" v-else>{{item.title}}</view> -->
							</view>
							<view class="check-pay">
								<image src="https://img.jukee.net/def/6fdf2202310181754233959.png" mode="widthFix" v-if="check_pay_index == index" />
								<image src="https://img.jukee.net/def/deb59202310181754215858.png" mode="widthFix" v-else />
							</view>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper pay-info">
						<view class="pay-total-price">总计：<text>¥{{payDataList[check_index].price}}</text></view>
						<view class="pay-button acea-center"  @click='goPay(payMode[check_pay_index].number || 0 , payMode[check_pay_index].value)'>立即支付</view>
					</view>
          <view class="svip">
            <view class="svip-icon"><image src="https://img.jukee.net/def/3902e202311271626269626.png" mode="widthFix" /></view>
            <view class="svip-tit">
              <view class="svip-tit">
                成为平台会员
              </view>
              <view class="svip-tit svip-tit-text">
                您发布的每条广告<br>
                均推送200位客户
              </view>
            </view>
            <view class="svip-btn" @click="goUrl('/pages/annex/vip_paid/index')">加入会员</view>
          </view>
				</view>
			</view>
		</block>
		<block v-if="payGroupName == 'service_refresh' || payGroupName == 'service_top_refresh'">
			<view class="payment" :class="pay_close ? 'on' : ''" >
				<view class="payment_content">
					<view style="display:flex;grid-gap: 50rpx;">
						<view>
							<view class="title acea-row row-center-wrapper" style="height: 80rpx;">
								<text style="color: red;">首页</text>置顶刷新
							</view>
							<view class="pay_data_lst" style="display: block;margin-top: 0;" v-if="payDataList && payDataList.length">
								<view class="pay_number_item" :class="service_type == 'service_top_refresh' ? 'pay_number_item_on' : ''" @click="clickServiceType('service_top_refresh')">
									<view class="pay_number_num">{{payDataList1[0].number}}{{unit}}</view>
									<view class="pay_number_price">{{payDataList1[0].price}}元</view>
								</view>
							</view>
						</view>
						<view>
							<view class="title acea-row row-center-wrapper" style="height: 80rpx;">
								<text style="color: red;">行业</text>置顶刷新
							</view>
							<view class="pay_data_lst" style="display: block;margin-top: 0;" v-if="payDataList1 && payDataList1.length">
								<view class="pay_number_item" :class="service_type == 'service_refresh' ? 'pay_number_item_on' : ''" @click="clickServiceType('service_refresh')">
									<view class="pay_number_num">{{payDataList[0].number}}{{unit}}</view>
									<view class="pay_number_price">{{payDataList[0].price}}元</view>
								</view>
							</view>
						</view>
					</view>
					<view class="pay_title">
						会员付费
					</view>
					<view class="item acea-row row-between-wrapper" @click='goPay(item.number || 0 , item.value)' v-for="(item,index) in payMode"
					 :key="index" v-if="item.payStatus == 1">
						<view class="left">
							<view class="iconfont" :class="item.icon"></view>
							<view class="text">
								<view class="name">{{item.name}}</view>
							</view>
							<view class="check-pay">
								<image src="https://img.jukee.net/def/6fdf2202310181754233959.png" mode="widthFix" v-if="check_pay_index == index" />
								<image src="https://img.jukee.net/def/deb59202310181754215858.png" mode="widthFix" v-else />
							</view>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper pay-info">
						<view class="pay-total-price">总计：<text>¥{{payDataList[check_index].price}}</text></view>
						<view class="pay-button acea-center"  @click='goPay(payMode[check_pay_index].number || 0 , payMode[check_pay_index].value)'>立即支付</view>
					</view>
				</view>
			</view>
		</block>
		<view class="mask" ref="close" @click='close' v-if="pay_close"></view>
	</view>
</template>

<script>
	 
	import {
		rechargeWechat,
    getUserInfo,
	} from '@/api/user.js';
	import { getSystemGroupData } from "@/api/api";
	export default {
		props: {
			payMode: {
				type: Array,
				default: function() {
					return [];
				}
			},
			pay_close: {
				type: Boolean,
				default: false,
			},
			isCall: {
				type: Boolean,
				default: false
			},
			payTitle: {
				type: String,
				default: ''
			},
			payGroupName: {
				type: String,
				default: ''
			},
			userCount: {
				type: Number|String,
				default: 0,
			},
			unit: {
				type: String,
				default: '次'
			},
			isValue: {
				type: Boolean,
				default: true
			},
			rechargeType: {
				type: Number, // 1购买查看用户联系方式 2购买人脉圈推广天数 3服务推广首页 4购买服务刷新次数
				default: 1,
			},
			extends: {
				type: Object,
				default: {},
			}
		},
		data() {
			return {
				check_index: 0,
				payDataList: [],
				payDataList1: [],
				check_pay_index: '',
				service_type: ''
			};
		},
		watch: {
			payGroupName:{
				handler(nVal,oVal){
					this.check_index= 0;
					this.getSystemGroupDataList();
				},
				immediate: true,
				// deep:true
			},
			payMode:{
				handler(nVal,oVal){
					for(let i = 0; i < nVal.length; i++) {
						if (this.check_pay_index === '' && nVal[i].payStatus == 1) {
							this.check_pay_index = i;
						}
					}
				},
				immediate: true,
			}
		},
		mounted() {
		},
    onLoad(options) {
				// this.getUserInfo();
		},
		methods: {
      goUrl(url) {
				this.$util.Tips(url);
			},
			clickCircleNumber(index) {
				this.check_index = index;
			},
			clickServiceType(type) {
				this.service_type = type;
				if (type == 'service_top_refresh') {
					this.rechargeType = 13
				} else {
					this.rechargeType = 5
				}
			},
			close: function() {
				this.$emit('onChangeFun', {
					action: 'payClose'
				});
			},
			goPay: function(number, paytype) {
				// console.log(number, paytype)
				/* return this.$emit('onChangeFun', {
					action: 'payCheck',
					value: paytype
				}); */
				let that = this;
				if (that.payGroupName == 'service_refresh' || that.payGroupName == 'service_top_refresh') {
					if (!this.service_type) {
						return that.$util.Tips({
							title: '请选择刷新置顶类型'
						});
					}
				}
				let order = {};
				if (this.service_type == 'service_top_refresh') {
					order = that.payDataList1[that.check_index]
				} else {
					order = that.payDataList[that.check_index]
				}
				let type = ''
				if (paytype == 'wechat' || paytype == 'routine') {
					// #ifdef H5
					type = this.$wechat.isWeixin() ? 'weixin' : 'h5';
					// #endif
					// #ifdef APP-PLUS
					type = 'weixin';
					// #endif
					// #ifdef MP
					type = 'routine';
					// #endif
				} else if (paytype == 'balance') {
					type = 'balance';
				}else if(paytype == 'alipay'){
					// #ifndef MP
					type = 'alipay';
					// #endif					
					// #ifdef MP
					type = 'alipayQr';
					// #endif
				}
				// console.log(type, paytype, order)
				if (!order || !order.group_data_id) return that.$util.Tips({
					title: '请选择要支付的订单'
				});
				if (paytype == 'balance' && parseFloat(number) < parseFloat(order.price)) return that.$util.Tips({
					title: '余额不足！'
				});
				uni.showLoading({
					title: '支付中'
				});
				rechargeWechat({
					type: type,
					recharge_id: order.group_data_id,
					recharge_type: that.rechargeType, // 1充值查看会员联系方式次数
					extend: that.extends,
					// #ifdef H5
					return_url: 'http://'+window.location.host+'/pages/users/index',
					// #endif
				}).then(res => {
					let status = res.data.type,
						jsConfig = res.data.config,
						goPages = '/pages/users/order_list/index';
					switch (status) {			
						case 'ORDER_EXIST':
						case 'EXTEND_ORDER':
						case 'PAY_ERROR':
						case 'error':
							uni.hideLoading();
							this.$emit('onChangeFun', {
								action: 'payClose'
							});
							return that.$util.Tips({
								title: res.message
							});							
							break;
						case 'success':
							uni.hideLoading();
							this.$emit('onChangeFun', {
								action: 'payClose'
							});							
							return that.$util.Tips({
								title: '支付成功',
								icon: 'success'
							}, ()=>{
								that.$emit('onChangeFun', {
									action: 'payOrderSuccess'
								});		
							});
							break;
						case 'alipay':
						case 'alipayQr':
							uni.hideLoading();
							this.$emit('onChangeFun', {
								action: 'payClose'
							});				
							uni.navigateTo({
								url: goPages,
							})	
							return 								
							break;	
						// #ifndef MP
						case "wechat":
						case "weixin":
						case "weixinApp":
							jsConfig.timeStamp = jsConfig.timestamp;
							// #ifndef APP-PLUS
							that.$wechat.pay(jsConfig).then(res => {	
								this.$emit('onChangeFun', {
									action: 'payClose'
								});
								uni.hideLoading();
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								}, ()=>{
									that.$emit('onChangeFun', {
										action: 'payOrderSuccess'
									});		
								});
							}).catch(res => {
								if (res.errMsg == 'chooseWXPay:cancel'){
									if(that.isCall){
										return that.$util.Tips({
											title: '取消支付'
										});
									}else{
										return that.$util.Tips({
											title: '取消支付'
										}, {	
											tab: 5,
											url: goPages
										});
									}
								} 
							})
							// #endif
							// #ifdef APP-PLUS
							let mp_pay_name=''
							if(uni.requestOrderPayment){
								mp_pay_name='requestOrderPayment'
							}else{
								mp_pay_name='requestPayment'
							}
							uni[mp_pay_name]({
								provider: 'wxpay',
								orderInfo: jsConfig,
								success: (e) => {
									this.$emit('onChangeFun', {
										action: 'payClose'
									});
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, {	
										tab: 5,
										url: goPages
									});
								},
								fail: (e) => {
									if(that.isCall){
										return that.$util.Tips({
											title: '取消支付'
										});
									}else{
										return that.$util.Tips({
											title: '取消支付'
										}, {	
											tab: 5,
											url: goPages
										});
									}
								},
								complete: () => {
									uni.hideLoading();
								},
							});
							// #endif
							break;
						// #endif
						// #ifdef MP
						case "routine":
							jsConfig.timeStamp = jsConfig.timestamp;
							that.toPay = true;
							let mp_pay_name=''
							if(uni.requestOrderPayment){
								mp_pay_name='requestOrderPayment'
							}else{
								mp_pay_name='requestPayment'
							}
							uni[mp_pay_name]({
								...jsConfig,
								success: function(res) {
									uni.hideLoading();
									that.$emit('onChangeFun', {
										action: 'payClose'
									});
									if (that.BargainId || that.combinationId || that.pinkId || that.seckillId)
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										}, {	
											tab: 5,
											url: goPages
										});
									
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, ()=>{
										that.$emit('onChangeFun', {
											action: 'payOrderSuccess'
										});		
									});
								},
								fail: function(e) {
									uni.hideLoading();
									that.$emit('onChangeFun', {
										action: 'payClose'
									});
									return that.$util.Tips({
										title: '取消支付'
									});
								},
								complete: function(e) {
									uni.hideLoading();									
									//关闭当前页面跳转至订单状态
									if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
										title: '取消支付'
									});
									that.$emit('onChangeFun', {
										action: 'payClose'
									});
								},
							})
							break;
						// #endif
						case "balance":
							uni.hideLoading();
							that.$emit('onChangeFun', {
								action: 'payClose'
							});
							//余额不足
							return that.$util.Tips({
								title: res.message
							});
							break;
						// #ifdef H5
						case 'h5':
							let host = window.location.protocol+"//"+window.location.host;
							let url = `${host}${goPages}`
							let eUrl = encodeURIComponent(url)
							let jsurl = jsConfig.mweb_url || jsConfig.h5_url
							let locations = `${jsurl}&redirect_url=${eUrl}`
							setTimeout(() => {
								location.href = locations;
							}, 100);
							break;
						// #endif	
							
						// #ifdef APP-PLUS
						case 'alipayApp':
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: jsConfig,
								success: (e) => {
									that.$emit('onChangeFun', {
										action: 'payClose'
									});
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, {	
										tab: 5,
										url: goPages
									});
							
								},
								fail: (e) => {
									return that.$util.Tips({
										title: '取消支付'
									});
								},
								complete: () => {
									uni.hideLoading();
								},
							});
						break;
						// #endif
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				})
			},
      /**
			 * 获取个人用户信息
			 */
			// getUserInfo: function() {
			// 	let that = this;
			// 	getUserInfo().then(res => {
      //     console.log("🚀 ~ getUserInfo ~ that:", that,res)
			// 		that.userInfo = res.data
			// 	});
			// },
			getSystemGroupDataList() {
				let that = this;
				if (that.payGroupName == 'service_refresh' || that.payGroupName == 'service_top_refresh') {
					getSystemGroupData({name: 'service_refresh'}).then(res=>{
						that.payDataList = res.data.list;
						that.$set(that, 'payDataList', res.data.list);
					})
					getSystemGroupData({name: 'service_top_refresh'}).then(res=>{
						that.payDataList1 = res.data.list;
						that.$set(that, 'payDataList1', res.data.list);
					})
				} else {
					getSystemGroupData({name:that.payGroupName}).then(res=>{
            const list = res.data.list
            getUserInfo().then(res => {
              that.userInfo = res.data
              const is_svip = that?.userInfo?.is_svip || that?.myUserInfo?.is_svip
  
                list.forEach(item => {
                if(item.group_data_id === 882 || item.group_data_id === 953 && is_svip>0 ) {
                  item.price = 0
                }
              })
              console.log("🚀 ~ onLoad ~ list:", list,this.userInfo,this.myUserInfo,is_svip)
              that.payDataList =list;
              that.$set(that, 'payDataList',list);
            });
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.payment {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 750rpx;
		border-radius: 16rpx 16rpx 0 0;
		background-color: #fff;
		padding-bottom: 60rpx;
		z-index: 99;
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		transform: translate3d(0, 100%, 0);
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: 500;
		color: #323232;
		line-height: 44rpx;
		overflow-y: auto;
		.user_circle_count {
			// color: #ff6a00;
			font-size: 26rpx;
		}
	}
	.payment_content {
		.pay_data_lst {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 20rpx;
			margin-top: 20rpx;
			padding: 0 30rpx;
			text-align: center;
			.pay_number_item {
				/* background: #FFE60F;
				padding: 10rpx;
				text-align: center;
				border-radius: 16rpx;
				border: 1px solid #FFE60F; */
				background: #F9F9F9;
				border-radius: 12rpx;
				padding: 26rpx 0;
				.pay_number_num {
					font-size: 36rpx;
					font-weight: 500;
					color: #323232;
					line-height: 50rpx;
				}
				.pay_number_price {
					font-size: 28rpx;
					font-weight: 400;
					color: #323232;
					line-height: 40rpx;
				}
			}
			.pay_number_item_on {
				background: #FFE103;
			}
		}
		.pay_title {
			text-align: left;
			padding: 40rpx 30rpx 0;
			font-size: 32rpx;
			font-weight: 500;
			color: #323232;
			line-height: 44rpx;
		}
	}
	.payment.on {
		transform: translate3d(0, 0, 0);
	}

	.payment .title {
		// text-align: center;
		height: 123rpx;
		font-size: 32rpx;
		color: #282828;
		font-weight: bold;
		padding-right: 30rpx;
		margin-left: 30rpx;
		position: relative;
		// border-bottom: 1px solid #eee;
		justify-content: left;
		text-align: left;
		position: sticky;
		top: 0;
		background: #fff;
	}

	.payment .title .iconfont {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 43rpx;
		color: #8a8a8a;
		font-weight: normal;
	}

	.payment .item {
		// border-bottom: 1px solid #eee;
		height: 100rpx;
		margin-left: 30rpx;
		padding-right: 30rpx;
	}

	.payment .item .left {
		// width: 610rpx;
		display: flex;
		width: 100%;
	}

	.payment .item .left .text {
		// width: 540rpx;
		flex: 1;
		display: flex;
		justify-content: space-between;
		margin-left: 22rpx;
	}

	.payment .item .left .text .name {
		font-size: 36rpx;
		color: #282828;
	}

	.payment .item .left .text .info {
		font-size: 24rpx;
		color: #999;
	}

	.payment .item .left .text .info .money {
		color: #FE960F;
	}

	.payment .item .left .iconfont {
		font-size: 45rpx;
		color: #4FB674;
	}

	.payment .item .left .iconfont.icon-zhifubao {
		color: #00aaea;
	}

	.payment .item .left .iconfont.icon-yuezhifu {
		color: #FE960F;
	}

	.payment .item .left .iconfont.icon-yuezhifu1 {
		color: #eb6623;
	}

	.payment .item .iconfont {
		font-size: 0.3rpx;
		color: #999;
	}
	
	.payment .item .check-pay {
		image {
			width: 50rpx;
		}
	}
	
	.pay-info {
		height: fit-content;
		border: 0;
		.pay-total-price {
			text {
				color: red;
			}
		}
		.pay-button {
			background-color: #09bb07;
			border-radius: 10rpx;
			padding: 30rpx 150rpx;
			color: #fff;
		}
	}

  .svip {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		font-weight: bold;
    margin: 30rpx 27rpx 0;
    position: relative;
    top: -3rpx;
    .svip-tit-text {
      font-size: 30rpx;
    }
		.svip-icon {
			display: flex;
			margin-right: 20rpx;
			image {
        width: 140rpx;
        margin-right: 45rpx;
			}
		}
		.svip-btn {
			margin-left: auto;
			text-align: center;
			background: #FFE60F;
			padding: 25rpx 0;
			border-radius: 10rpx;
			width: 200rpx;
		}
	}
</style>
